<template>
  <div>
    <van-search
      v-model="value"
      placeholder="请输入搜索关键词"
      background="#4fc08d"
      shape="round"
      @click="input(value)"
    ></van-search>
    <div class="search_wrap" v-if="musicSearch.length === 0">
      <p class="hot_title">热门搜索</p>
      <!-- 关键词容器 -->
      <div class="hot_name_wrap">
        <!-- 关键词样式 -->
        <span
          class="hot_item"
          v-for="(obj, index) in hotSearch"
          :key="index"
          @click="fn(obj.first)"
          >{{ obj.first }}</span
        >
      </div>
    </div>
    <div class="search_wrap1" v-else>
      <p class="hot_title">最佳匹配</p>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <song-item
          v-for="obj in musicSearch"
          :name="obj.name"
          :author="obj.ar[0].name"
          :id="obj.id"
          :key="obj.id"
        >
        </song-item>
      </van-list>
    </div>
    <!-- 加载更多 -->
  </div>
</template>

<script>
import songItem from "@/components/songItem.vue";
import { hotSearchApi, musicSearchApi } from "@/api";
export default {
  data() {
    return {
      value: "zxcc",
      hotSearch: [],
      musicSearch: [],
      loading: false,
      finished: false,
      page: 1,
      timer: null,
    };
  },
  async created() {
    const res = await hotSearchApi();
    this.hotSearch = res.data.result.hots;
  },
  methods: {
    async fn(val) {
      this.page = 1; //每次点击都把page为1
      this.finished = false; //如果点击其他热词有数据
      this.value = val;
      const res = await musicSearchApi({
        keywords: val,
        limit: 20,
        offset: (this.page - 1) * 20,
      });
      console.log(res);
      this.musicSearch = res.data.result.songs;
    },
    input(val) {
      this.page = 1;
      // 输入框实现防抖
      if (this.timer) clearTimeout(this.timer); //清楚上一个定时器，只执行最后一次
      setTimeout(async () => {
        this.finished = false;
        if (val === "") return alert("不能为空");
        const res = await musicSearchApi({
          keywords: val,
          limit: 20,
          offset: (this.page - 1) * 20,
        });
        console.log(res);
        // 如果没有数据返回的话
        if (res.data.result.songs === undefined) {
          this.finished = true;
          this.musicSearch = [];

          return;
        }
        this.musicSearch = res.data.result.songs;
      }, 1000);
    },
    async onLoad() {
      this.page++;
      const res = await musicSearchApi({
        keywords: this.value,
        limit: 20,
        offset: (this.page - 1) * 20,
      });
      // 如果没有更多数据、
      if (res.data.result.songs === undefined) {
        this.loading = false;
        this.finished = true; //证明数据已经加载完成，显示没有更多数据
        return;
      }
      this.musicSearch = [...this.musicSearch, ...res.data.result.songs];
      this.loading = false;
    },
  },
  components: {
    songItem,
  },
};
</script>

<style>
.search_wrap {
  padding: 0.266667rem;
}
.search_wrap1 {
  padding-bottom: 1.7rem;
}

/*热门搜索文字标题样式 */
.hot_title {
  font-size: 0.32rem;
  color: #666;
}

/* 热搜词_容器 */
.hot_name_wrap {
  margin: 0.266667rem 0;
}

/* 热搜词_样式 */
.hot_item {
  display: inline-block;
  height: 0.853333rem;
  margin-right: 0.213333rem;
  margin-bottom: 0.213333rem;
  padding: 0 0.373333rem;
  font-size: 0.373333rem;
  line-height: 0.853333rem;
  color: #333;
  border-color: #d3d4da;
  border-radius: 0.853333rem;
  border: 1px solid #d3d4da;
}
</style>
